<div class="tags-box">
  <div class="tag-cloud-title language" data-lan="cloud-tags" data-count="<%= tags.length %>">
    非常好！目前共计 <%= tags.length %> 个标签，继续努力！
  </div>
  <div class="tag-cloud-list" id="tags">
    <% for(let i = 0; i < tags.length; i++) { %>
      <%let count = 0;%>
      <% for(let j = 0; j < site.posts.length; j++) { %>
        <% for(let k = 0; k < site.posts[j].tags.length; k++) { %>
          <% if (site.posts[j].tags[k].slug === tags[i].slug) { %>
            <%count++;break%>
          <% } %>
        <% } %>
      <% } %>
      <a class="cloud-tag" href="<%= tags[i].link %>" rel="<%=count%>"><%= tags[i].name %></a>
    <% } %>
  </div>
</div>
<script>

  let fontStart = 12, fontEnd = 30, colorStart = '#666', colorEnd = '#000';
  let tags = document.querySelector('#tags').children;
  let counts = [];
  for(let i = 0; i < tags.length; i++) {
    counts.push(tags[i].rel);
  }
  let lowest = Math.min.apply(null,counts), highest = Math.max.apply(null,counts);;
  let range = highest - lowest;
  if (range === 0) {
    range = 1;
  }
  let fontIncr, colorIncr;
  fontIncr = (fontEnd - fontStart) / range;
  
  let sColorArr = toRGB(colorStart), eColorArr = toRGB(colorEnd);

  for(let i = 0; i < tags.length; i++) {
    let disCount = tags[i].rel - lowest;
    let fontSize = fontStart + disCount * fontIncr;
    let style = 'font-size: ' + fontSize + 'px;';
    let arr = [];
    for(let c = 0; c < sColorArr.length; c++) {
      if (disCount === 0) {
        disCount = 1;
      }
      let val = (sColorArr[c] - eColorArr[c]) / range * disCount;
      if (val >= 100) {
        val = eColorArr[c];
      } else if (val <= 0) {
        val = sColorArr[c];
      }
      arr[c] = Math.floor(val);
    }
    style += 'color: ' + toHex(arr);
    tags[i].style = style;
  }

  function toRGB(code) {
    if (code.length === 4) {
      code = code.replace(/(\w)(\w)(\w)/gi, "\$1\$1\$2\$2\$3\$3");
    }
    var hex = /(\w{2})(\w{2})(\w{2})/.exec(code);
    return [parseInt(hex[1], 16), parseInt(hex[2], 16), parseInt(hex[3], 16)];
  }

  function toHex(ary) {
    return "#" + ((1 << 24) + (ary[0] << 16) + (ary[1] << 8) + ary[2]).toString(16).slice(1);
  }

</script>